<template>
  <view class="container">
    <custom-nav title="订单记录"></custom-nav>

    <view class="content" v-if="!isLoading">

      <template v-if="total">
        <scroll-view style="height: 100%" scroll-y="true" refresher-enabled="true" :refresher-triggered="isRefresh" refresher-background="transparent" :refresher-threshold="100"
          scroll-with-animation="true" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @scrolltolower="onLower">

          <order-card v-for="item in orderList" :key="item.id" :item="item"></order-card>
          <!-- 加载更多 -->
          <custom-load :status="loadStatus" v-if="orderList?.length"></custom-load>

        </scroll-view>
      </template>

      <view style="margin-top:200rpx" v-else>
        <custom-empty :emptyInfo="emptyInfo" @click="toServe"></custom-empty>
      </view>
    </view>

    <view class="order-bottom" v-if="total">
      <view class="o-btn" @click="toServe"> <custom-btn>订单问题 联系管家</custom-btn> </view>
    </view>
  </view>
</template>

<script setup>
import OrderCard from "./components/order-card.vue";
import { fetchOrderList } from "@/api/my";
import useStore from "@/store";
const { common } = useStore();

const emptyInfo = shallowReactive({
  title: "您当前暂时没有订单记录",
  tips: "若有问题请联系客服",
  btnText: "联系管家",
});

const isRefresh = ref(false);
const total = ref(0);
const orderList = ref([]);
const loadStatus = ref("");
const isLoading = ref(true);
const filterQuery = reactive({
  page: 1,
  limit: 4,
});
const onRestore = () => {
  uni.showToast({
    title: "刷新成功~",
    icon: "none",
  });
};
const onRefresh = () => {
  filterQuery.page = 1;
  isRefresh.value = true;
  getList(true);
};

const onLower = () => {
  loadStatus.value = "loading";
  ++filterQuery.page;

  getList(false);
};

const getList = async (refresh = true) => {
  const params = {
    page: filterQuery.page,
  };

  try {
    const { data } = await fetchOrderList(params);
    const { data: rows } = data.orderInfo;
    isRefresh.value = false;
    total.value = data.orderInfo?.total;
    orderList.value = refresh ? rows : orderList.value.concat(rows);
    if (orderList.value.length >= total.value) {
      loadStatus.value = "nomore";
    }
    isLoading.value = false;
  } catch (error) {
    isRefresh.value = false;
    isLoading.value = false;
  }
};

const toServe = () => {
  common.updatePopupOpen(true, "serve");
};

onLoad(() => {
  getList();
});
</script>

<style lang=scss scoped>
@import "@/styles/global.scss";
.order-bottom {
  padding: 40rpx 60rpx 120rpx;
  background: #ffffff;
  .o-btn {
    width: 100%;
    height: 120rpx;
    line-height: 120rpx;
    font-weight: 600;
    font-size: 40rpx;
    color: #fff;
    background: #ff5c55;
    border-radius: 120rpx;
  }
}
</style>